<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>

        .tran {
            animation: bb 3s linear infinite;

        }

        @keyframes bb {
            0% {
                background: red;

            }
            50% {
                background: yellow;
                transform: translateY(150%);
            }
            100% {
                background: red;
            }
        }

    </style>
</head>
<body>
<div id="app">
    <div>内联样式比较坑爹，用的是style对象+字符串常规写法</div>

    <h3>绑定时，若返回json的形式，则不能在每句样式后手动加分号，这会导致vue不识别，忽略，不渲染该句样式。</h3>

    <!--注意：当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。-->
    <div class="tran" v-bind:style="[mi,ce]">喵</div>
    <p>
    <div v-bind:style="wangwang">汪汪</div>
    </p>

</div>

<script>
    var v = new Vue({
        el: '#app',
        data: {

        },
        computed: {
            wangwang(){
                return {
                    width:'50px',
                    height:'50px',
                    lineHeight:'50px',
                    borderRadius:'50%',
                //返回json的形式，不能在每句样式后手动加分号，会导致不识别，忽略，不渲染。
                    transform:'translate(100px 50px);',
                    backgroundColor:'#ffaa77'

                }
            },
            mi: function () {
                return {
                    width: "300px",
                    height: "300px",
                    backgroundColor: "cornflowerblue"
                }

            },
            ce: function () {

                return {//混杂的写法。。。key非字符串，则应当是style对象的形式。key为字符串，则是内联样式普通写法
                    borderRadius: "50%",
                    "font-size": "100px",
                    "text-align": "center",
                    "line-height": "300px",
                }
            }
        }
    })


</script>

</body>
</html>